<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="queryParams.roleName"
          placeholder="请输入角色名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="权限字符" prop="roleKey">
        <el-input
          v-model="queryParams.roleKey"
          placeholder="请输入权限字符"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="isEnable">
        <el-select
          v-model="queryParams.isEnable"
          placeholder="角色状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in isStopEnableStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
        <el-button size="mini" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:role:add']"
        >新增</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="roleList">
      <el-table-column label="编号" type="index" width="60" />
      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" align="center"/>
      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" align="center" width="150" />
      <el-table-column label="显示顺序" prop="sort" width="100" align="center"/>
      <el-table-column label="状态" align="center" width="200">
        <template slot-scope="scope">
          <el-switch
            :disabled="scope.row.roleKey==='admin'"
            v-model="scope.row.isStop"
            :active-value="activeData.activeValue"
            :inactive-value="activeData.inactiveValue"
            :active-color="activeData.activeColor"
            :inactive-color="activeData.inactiveColor"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== '1'">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['system:role:edit']">
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right"></i>更多
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleDataScope" icon="el-icon-circle-check"
                v-hasPermi="['system:role:edit']">数据权限</el-dropdown-item>
              <el-dropdown-item command="handleAuthUser" icon="el-icon-user"
                v-hasPermi="['system:role:edit']">分配用户</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.current"
      :limit.sync="queryParams.size"
      @pagination="getPagelist"
    />
    <RoleEdit v-if="this.editData.open" :prop="this.editData" @close="closeEditPanel"></RoleEdit>
    <DataScopeEdit v-if="this.dataScopeEditData.open" :prop="this.dataScopeEditData" @close="closeDatascopeEditPanel"></DataScopeEdit>
  </div>
</template>

<script>
import { getPagelist, dataScope, changeStatus,del, checkRoleNameUnique, checkRoleKeyUnique } from "@/api/system/role";
import { treeselect as deptTreeselect, roleDeptTreeselect } from "@/api/system/dept";
import RoleEdit from "@/views/system/role/edit.vue";
import DataScopeEdit from "@/views/system/role/dataScopeEdit.vue";
import { isStopEnableStatus} from "@/utils/constants/common/constants.js";

export default {
  name: "Role",
  dicts: [],
  components:{RoleEdit,DataScopeEdit},
  data() {
    return {
      // 遮罩层
      loading: true,
      total: 0,
      roleList: [],
      activeData:{
        activeValue: "0",
        inactiveValue: "1",
        activeText:"启用",
        inactiveText:"停用",
        activeColor:"#13ce66",
        inactiveColor:"#ff4949",
      },
      isStopEnableStatus:isStopEnableStatus,
      editData:{open:false,title:'添加角色',editId:null},
      dataScopeEditData:{open:false,title:'数据权限分配',roleId:null},
      authUserData:{open:false,title:'分配用户角色',roleId:null},
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        roleName: null,
        roleKey: null,
        isStop: null
      },
    };
  },
  created() {
    this.getPagelist();
  },
  methods: {
    /** 查询角色列表 */
    getPagelist() {
      this.loading = true;
      getPagelist(this.queryParams).then(res => {
          this.roleList = res.data.records;
          this.total = res.data.total;
          this.loading = false;
        }
      );
    },
    // 角色状态修改
    handleStatusChange(row) {
      let text = row.isEnable === "0" ? "启用" : "停用";
      this.$modal.confirm('确认要'+text+'该角色吗？').then(function() {
        return changeStatus({roleId:row.roleId,isEnable:row.isEnable});
      }).then(() => {
        this.$modal.msgSuccess(text+"成功");
      }).catch(function() {
        row.isEnable = row.isEnable === "0" ? "1" : "0";
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.current = 1;
      this.getPagelist();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleDataScope":
          this.handleDataScope(row);
          break;
        case "handleAuthUser":
          this.handleAuthUser(row);
          break;
        default:
          break;
      }
    },

    handleAdd() {
      this.editData = {open:true,title:'添加角色',editId:null}
    },
    closeEditPanel(saveParams){
      this.editData = {open:false,title:'添加角色',editId:null}
      if(saveParams.isSaveData){
        this.getPagelist()
      }
    },
    handleUpdate(row) {
      this.editData = {open:true,title:'修改角色',editId:row.roleId}
    },
    /** 分配数据权限操作 */
    handleDataScope(row) {
      this.dataScopeEditData = {open:true,title:'角色数据权限分配',roleId:row.roleId}
    },
    closeDatascopeEditPanel(){
      this.dataScopeEditData = {open:false,title:'角色数据权限分配',roleId:null}
    },
    /** 分配用户操作 */
    handleAuthUser(row) {
      const roleId = row.roleId
      this.$router.push({ name: 'AuthUser', params: { roleId }});
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否删除该角色？').then(function() {
        return del(row.roleId);
      }).then(() => {
        this.getPagelist();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/role/export', {
        ...this.queryParams
      }, `role_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
